<template>
	<view class="wanlshop-category-container">
		<!-- 导航条 -->
		<view class="cu-custom" :style="{ height: $wanlshop.wanlsys().height + 'px' }">
			<view
				class="cu-bar fixed bg-white solid-bottom"
				:style="{
					height: $wanlshop.wanlsys().height + 'px',
					paddingTop: $wanlshop.wanlsys().top + 'px'
				}"
			>
				<view class="search-form round">
					<text class="wlIcon-sousuo1 text-bold"></text>
					<swiper
						class="search-swiper placeholder"
						vertical
						autoplay
						circular
						interval="3000"
					>
						<swiper-item @tap="productSearch('')">搜索商品、类目</swiper-item>
						<swiper-item
							v-for="(item, index) in common.modulesData.searchModules"
							:key="item.keywords"
							@tap="productSearch(item.keywords)"
						>
							{{ item.keywords }}
						</swiper-item>
					</swiper>
				</view>
				
				<!-- #ifndef MP -->
				<view class="action" style="width: 200rpx;">
					
				</view>
				<!-- #endif -->
			</view>
		</view>
		
		<!-- 加载类目 -->
		<wanl-shop-classify
			:mainHeight="height"
			:categoryStyle="parseInt(common.appStyle.category_style)"
			:categoryData="common.modulesData.yzhcategoryModules"
			:adverData="common.adData.categoryAdverts"
			:goodsList="goodsList"
			:yzh="true"
		/>
		
	</view>
</template>

<script>
import { mapState } from 'vuex';
import wanlShopClassify from '@/components/wanl-shop/classify';

export default {
	data() {
		return {
			height: 0,
			modalName: null,
			scrollAnimation: 300,
			
			currentindex:0,
			yzhcategoryModules: [],
			goodsList: []
			
		};
	},
	components: {
		wanlShopClassify
	},
	computed: {
		...mapState(['common', 'statistics', 'cart'])
	},
	
	onLoad() {		
		let wanlsys = this.$wanlshop.wanlsys();
		// #ifdef APP-PLUS
		this.height = wanlsys.windowHeight + wanlsys.windowBottom - wanlsys.height;
		// #endif
		// #ifdef H5
		this.height = wanlsys.windowHeight + wanlsys.windowBottom - wanlsys.height - 50;
		// #endif
		// #ifdef MP
		this.height = 2* wanlsys.windowHeight;//wanlsys.height;//wanlsys.windowHeight - wanlsys.height;
		//console.log(this.height);
		// #endif
		// #ifdef MP-WEIXIN
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
		
		this.loadData();
	},
	methods: {
		onReachScollBottom() {
			//触底触发的操作，
			//如是数据列表，则查数据，追加在列表上
			//如其他情况自行变动即可
			//this.current_page = this.current_page + 1;
			//this.loadhfwyData();
			
		},
		
		ontabtap(index){
			this.currentindex = index;
		},
		
		
		
	
		async loadData(){			
			await uni.request({
				url: '/wanlshop/ddp/getGoodsListByCondition',
				data: {size:8,categoryCode: this.common.modulesData.yzhcategoryModules['0'].childlist['0'].id} ,
				success: res => {
					console.log(res);
					this.goodsList = res.data.data;
				}
			})
		},
		
		// 弹出层
		showModal(name) {
			// 滚动下分享
			if (name == 'share' && this.modalName != 'share') {
				setTimeout(() => {
					this.scrollAnimation = 300;
				}, 300);
			}
			this.modalName = name;
		},
		hideModal(name) {
			if (name) {
				this.showModal(name);
			} else {
				this.modalName = null;
			}
		},
		handleGroups() {
			this.$wanlshop.to('/pages/apps/groups/index');
		},
		productSearch(text) {
			this.$wanlshop.to(`/pages/page/search?type=goods&keywords=${text}&yzh=1`, 'fade-in', 100);
		}
	}
};
</script>

<style>
	.uni-tab-item {
	    /* #ifndef APP-PLUS */
	    display: inline-block;
	    /* #endif */
	    flex-wrap: nowrap;
	    padding-left: 34rpx;
	    padding-right: 34rpx;
	}
	
	.uni-tab-item-title {
	    color: #555;
	    font-size: 30rpx;
	    height: 80rpx;
	    line-height: 80rpx;
	    flex-wrap: nowrap;
	    /* #ifndef APP-PLUS */
	    white-space: nowrap;
	    /* #endif */
	}
	
	.uni-tab-item-title-active {
	    color: #007AFF;
	}
	
	.swiper-box {
	    flex: 1;
	}
	
	.swiper-item {
	    flex: 1;
	    flex-direction: row;
	}
	
.scroll-h {
	width: 750rpx;
	/* #ifdef H5 */
	width:100%;
	/* #endif */
	height: 80rpx;
	flex-direction: row;
	/* #ifndef APP-PLUS */
	white-space: nowrap;
	/* #endif */
	flex-wrap: nowrap; 
	border-bottom-style: solid;
	border-color: #cccccc;
	border-bottom-width: 1px; 
}

.cu-custom .cu-bar {
	z-index: 99;
}
.cu-bar .action {
	position: relative;
}

/* #ifdef MP */
.cu-bar .search-form {
	margin: 0 0 0 25rpx;
}
/* #endif */
</style>
